import { Component, OnInit,Input,Output,EventEmitter} from '@angular/core';
import { JsonApiService } from "app/core/api/json-api.service"; //http请求配置引入
import {config} from '../../../shared/smartadmin.config';
declare var $: any;
declare var BMap: any;
declare var toMapPoint: any;
declare var INFOBOX_AT_TOP;
@Component({
  	selector: 'bMap1-component',
  	templateUrl: './bMap1.component.html',
  	styleUrls:['./bMap1.css'],
})
export class BMap1Component implements OnInit{
	@Input() trackParams: any;//获取轨迹的参数
	myBMap:any;
	carMoveCanvasLayer:any;
	abnormalInfo;
	lineStyle={star:false,end:false,color:true,infoUrl:config.BaseURL};
	constructor(private jsonApiService: JsonApiService) {}
	//折线移动,地图轨迹添加坐标位置点函数
	lineMoveCarPoint(data) {
		if(data.lat > 0) {
			var mp = this.myBMap;
			var update = function update() {
				var ctx = this.canvas.getContext("2d");
				if(!ctx) {
					return;
				}
				ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
				var point = new BMap.Point(data.lng, data.lat);
				var pixel = mp.pointToPixel(point);
				ctx.beginPath();
				ctx.strokeStyle = '#d0d4d7';
				ctx.arc(pixel.x, pixel.y, 35, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.beginPath();
				ctx.fillStyle = 'rgba(35, 152, 255, 0.14)';
				ctx.arc(pixel.x, pixel.y, 34, 0, 2 * Math.PI);
				ctx.fill();
				ctx.beginPath();
				ctx.strokeStyle = '#c2c2c4';
				ctx.arc(pixel.x, pixel.y, 8, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.beginPath();
				ctx.fillStyle = '#fff';
				ctx.arc(pixel.x, pixel.y, 7, 0, 2 * Math.PI);
				ctx.fill();
				ctx.beginPath();
				ctx.fillStyle = '#1496ff';
				ctx.arc(pixel.x, pixel.y, 2.6, 0, 2 * Math.PI);
				ctx.fill();
			};
			if(typeof this.carMoveCanvasLayer != 'undefined') {
				this.carMoveCanvasLayer.options.update = update;
				this.carMoveCanvasLayer._draw();
				return;
			}
			this.carMoveCanvasLayer = new CanvasLayer({
				map: this.myBMap,
				update: update,
				zIndex: 10
			});
		}
	}
   	resetCarMoverCanvasLayer(){
   		function nullUpdate() {}
		this.carMoveCanvasLayer = new CanvasLayer({
			map: this.myBMap,
			update: nullUpdate,
			zIndex: 10
		});
   	}
 	ngOnInit(){
 		this.myBMap = new BMap.Map('baiduMap',{enableMapClick: false}); //创建地图实例
		let point = new BMap.Point(116.404, 39.915); //创建点坐标
		this.myBMap.centerAndZoom(point, 15); //初始化地图，设置中心点坐标和地图级别
		this.myBMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		this.myBMap.disableDoubleClickZoom();//禁用双击放大
		this.resetCarMoverCanvasLayer();
		this.myBMap.addOverlay(this.carMoveCanvasLayer);
 	}	
  	ngOnChanges() {
  		//this.trackParams 是折线图传过来在地图上需要展示的数据,当type=trackline时 画整条轨迹type= movePoint时 显示移动折线上的点对应的坐标位置
		if(this.trackParams){
			let resultData=this.trackParams.data;
			if(this.trackParams.type=='trackline'){
				this.trimDarwTrackMapView();
				if(!resultData||resultData.length<1) return;
				this.drawnormalTrack(resultData.track1);
//				drawTrackLine(resultData.track1,this.myBMap,this.lineStyle);
				this.drawCorrectTrack(resultData.correct);
			}
			if(this.trackParams.type=='movePoint') this.lineMoveCarPoint(resultData);
			if(this.trackParams.type=='clickPoint') {
				common.createInfoBox(this.myBMap,resultData,this.lineStyle.infoUrl)
			};
			if(this.trackParams.type=='clickOffPoint'){
				 this.createAbnormalInfo(resultData);
			};
		}
	}
  	
	//创建生成离线警报弹窗
	createAbnormalInfo(infoData){
		infoData.onTime=infoData.onTime?infoData.onTime:'无';
		if(infoData.lng==''||!infoData.lng){
			this.jsonApiService.message('经纬度异常');
			return;
		}
		if(this.abnormalInfo){
			this.myBMap.removeOverlay(this.abnormalInfo);
		}
		let point = new BMap.Point(infoData.lng,infoData.lat);
		infoData.abType=infoData.type=='1'?'主板开关机事件':'主机上下电事件';
		let colseTime=infoData.totalSecond+'秒';
		if(infoData.totalSecond>60){
			colseTime=common.secondToDate(infoData.totalSecond);
		}
		let lostWeightHtml='';
			if(infoData.lostime){
				lostWeightHtml='<li><span class="leftSpan">重量丢失：</span><span class="rightSpan"> 约'+common.secondToDate(infoData.lostime)+'</span></li>';
			}
		let html='<div class="abInfobox infoBox">'+
			'<div class="title">'+infoData.carNumber+'异常信息</div>'+
			'<div class="content">'+
				'<ul>'+
					'<li><span class="leftSpan">消息类型：</span><span class="rightSpan"> 离线警报 </span></li>'+
					'<li><span class="leftSpan">关机时间：</span><span class="rightSpan"> '+infoData.offTime+'</span></li>'+
					'<li><span class="leftSpan">开机时间：</span><span class="rightSpan"> '+infoData.onTime+'</span></li>'+
					'<li><span class="leftSpan">关机时长：</span><span class="rightSpan"> '+colseTime+'</span></li>'+
//					lostWeightHtml+
					'<li><span class="leftSpan">离线地址：</span><span class="rightSpan"> '+infoData.address+'</span></li>'+
				'</ul>'+
			'</div>'+
			'<div class="abpointer"></div>'+
		'</div>';
		this.abnormalInfo = new BMapLib.InfoBox(this.myBMap,html,{
			boxStyle : {
				width : "240px",
				height : "0"
			},
			offset : new BMap.Size(240, 160),
			closeIconMargin: "12px 0px 0;z-index: 1;width: 18px",
			closeIconUrl :  "assets/img/trackImage/close1.png",
			enableAutoPan : true,
			align : INFOBOX_AT_TOP
		});
		let marker = new BMap.Marker(point);
		this.abnormalInfo.open(marker);
	}
  	trimDarwTrackMapView(){
  		this.myBMap.clearOverlays();
  		this.resetCarMoverCanvasLayer();
  		if(this.trackParams.data.length<2) return;
  		let longitude,latitude,point;
  		for (let i=0;i<this.trackParams.data.track1.length;i++){
  			let item=this.trackParams.data.track1[i];
  			if(item){
  				if(item.lng){
  					longitude=Number(item.lng);
  					latitude =Number(item.lat);
  				}
  				else if(item.x){
  					longitude=Number(item.x);
  					latitude =Number(item.y);
  				}
  				else if(item.longitude){
  					longitude=Number(item.longitude);
  					latitude =Number(item.latitude);
  				}
  			}
  			if(longitude>0&&latitude>0){
  				point={'lng':longitude,'lat':latitude};
  				break;
  			}
  		}
  		let mapSize=this.myBMap.getZoom();
  		this.myBMap.centerAndZoom(new BMap.Point(point.lng, point.lat), mapSize);
  	}
  	
  	drawnormalTrack(pos){
  		var line = [];
		var posLen = pos.length;
		for (var i=0; i<posLen;i++){
			if(pos[i].lng&&pos[i].lat){
				line.push(new BMap.Point(pos[i].lng, pos[i].lat))
			}
			
		}
	  	var polyline = new BMap.Polyline(line, {
			strokeColor: "#4169e1",
			strokeWeight: 3,
			strokeOpacity: 1
		})
		this.myBMap.addOverlay(polyline);		
  	}
  	drawCorrectTrack(pos){
  		var line = [];
		var posLen = pos.length;
		let fristPoint;
		if(posLen<1) return;
		for (var i=0; i<posLen;i++){
			let mapPoint=toMapPoint({lng:pos[i].rectifyX,lat:pos[i].rectifyY});
			
			if(mapPoint) {
				if(!fristPoint) fristPoint=mapPoint;
				line.push(new BMap.Point(mapPoint.lng, mapPoint.lat));
			}
		}
	  	var polyline = new BMap.Polyline(line, {
			strokeColor: "#c23531",
			strokeWeight: 3,
			strokeOpacity: 1
		})
		this.myBMap.addOverlay(polyline);		
  		setTimeout(function(){
  			if(fristPoint){
  				this.myBMap.centerAndZoom(new BMap.Point(fristPoint.lng,fristPoint.lat), 12); 
  			}
			
		}.bind(this),200)
  	}
}